<template>
    <el-dialog :model-value="dialogVisible" :title="title" width="60%" @close="handleClose" align-center>

        <div class="container">
            <el-scrollbar>
                <el-form ref="ruleFormRef" style="width: 100%;" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>

                    <el-form-item label="分类名" prop="name">
                        <el-input size="large" v-model="ruleForm.name" type="text" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" style="width: 100%" type="textarea"
                            placeholder="Please input" />
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :value="0" size="large" border>正常</el-radio>
                            <el-radio :value="1" size="large" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>

        <template #footer class="footer">
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { addCategoryAPI, updateCategoryAPI } from '@/api';

const emits = defineEmits(['update:modelValue', 'initCategoryList'])

const originalroleData = () => ({
    id: '',
    name: '',
    remark: '',
    status: 0
})

let ruleForm = reactive(originalroleData())

const props = defineProps({
    title: {
        type: String,
        default: "标题"
    },
    dialogVisible: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number,
        default: -1
    },
    categoryValue: {
        type: Object,
        default: {}
    }
})

const handleClose = () => {
    emits('update:modelValue', false)
}

const handleConfirm = async () => {
    let res = ref()
    if (props.id == -1) {
        await addCategoryAPI(ruleForm)
        res.value = "添加成功"
    }
    else {
        await updateCategoryAPI(ruleForm)
        res.value = "更新成功"
    }
    ElMessage.success(res.value)
    emits('initCategoryList')
    handleClose()
}

const rules = reactive({
    name: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
})

watch(
    () => props.dialogVisible,
    () => {
        console.log("---00---1", props.id)
        if (props.id != -1) {
            ruleForm = props.categoryValue

        }
    }, { deep: true, immediate: true })

</script>

<style lang="scss" scoped>
.container {
    margin: 20px 0;
}

.el-dialog {
    margin: 20px;
}
</style>